<div class="main-content">
	<div class="main-content-inner">
		<div class="breadcrumbs ace-save-state" id="breadcrumbs">
			<ul class="breadcrumb">
				<li>
					<i class="ace-icon fa fa-home home-icon"></i>
					<a href="#">首页</a>
				</li>
                <li>
					<i class="ace-icon fa fa-home home-icon"></i>
					<a href="#">餐饮管理</a>
				</li>
				<li class="active">订单管理</li>
			</ul><!-- /.breadcrumb -->

			<div class="nav-search" id="nav-search">
				<form class="form-search">
					<span class="input-icon">
						<input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
						<i class="ace-icon fa fa-search nav-search-icon"></i>
					</span>
				</form>
			</div><!-- /.nav-search -->
		</div>

		<div class="page-content">
			<div class="page-header">
				<h1>
					订单管理
				</h1>
			</div><!-- /.page-header -->

			<div class="row">
				<div class="col-xs-12">
					<!-- PAGE CONTENT BEGINS -->
                    <div class="visible" id="main-widget-container">

                        <div class="row">
                            <div class="col-xs-12 col-sm-6 widget-container-col" id="widget-container-col-9">
                                <?php 
								for ($x=0; $x<=5; $x++) {
									echo '<div class="widget-box widget-color-red" id="widget-box-9">
										<div class="widget-header">
											<h5 class="widget-title">10001</h5>
	
											<div class="widget-toolbar">
												<a href="#" data-action="collapse">
													<i class="1 ace-icon fa fa-chevron-up bigger-125"></i>
												</a>
											</div>
	
										</div>
	
										<div class="widget-body">
											<div class="widget-main">
												<table id="simple-table" class="table  table-bordered table-hover">
													<thead>
														<tr>
															<th class="center width-70">名称</th>
								
															<th class="center">价格</th>
	
															<th class="center">数量</th>
														</tr>
													</thead>
								
													<tbody>
														<tr>                            
															<td>
																宫保鸡丁
															</td>
								
															<td  class="center">
																3.00
															</td>
	
															<td  class="center">
																1
															</td>
														</tr>
														<tr>                            
															<td>
																回锅肉
															</td>
								
															<td  class="center">
																3.00
															</td>
	
															<td  class="center">
																1
															</td>
														</tr>
														<tr>                            
															<td>
																醋溜土豆丝
															</td>
								
															<td  class="center">
																3.00
															</td>
	
															<td  class="center">
																1
															</td>
														</tr>
														<tr>                            
															<td>
																红烧肉
															</td>
								
															<td  class="center">
																3.00
															</td>
	
															<td  class="center">
																1
															</td>
														</tr>
														<tr>                            
															<td>
																炒菜花
															</td>
								
															<td  class="center">
																3.00
															</td>
	
															<td  class="center">
																1
															</td>
														</tr>
														<tr>                            
															<td></td>
								
															<td  class="center">
																总价
															</td>
	
															<td  class="center">
																15.00
															</td>
														</tr>
													</tbody>
												</table>
											</div>
	
											<div class="widget-toolbox padding-8 clearfix">
												<button class="btn btn-xs btn-danger pull-left">
													<i class="ace-icon fa fa-times"></i>
													<span class="bigger-110">拒绝</span>
												</button>
	
												<button class="btn btn-xs btn-success pull-right">
													<span class="bigger-110">接受</span>
	
													<i class="ace-icon fa fa-arrow-right icon-on-right"></i>
												</button>
											</div>
										</div>
									</div>';
								}
								?>
                            </div>
                        </div>

                        <div class="space"></div>

					<!-- PAGE CONTENT ENDS -->
				</div><!-- /.col -->
			</div><!-- /.row -->
		</div><!-- /.page-content -->
	</div>
</div><!-- /.main-content -->

<!-- basic scripts -->

		<!--[if !IE]> -->
		<script src="../../../../public/static/assets/js/jquery-2.1.4.min.js"></script>

		<!-- <![endif]-->

		<!--[if IE]>
<script src="assets/js/jquery-1.11.3.min.js"></script>
<![endif]-->
		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='../../../../public/static/assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="../../../../public/static/assets/js/bootstrap.min.js"></script>

		<!-- page specific plugin scripts -->
		<script src="../../../../public/static/assets/js/tree.min.js"></script>

		<!-- ace scripts -->
		<script src="../../../../public/static/assets/js/ace-elements.min.js"></script>
		<script src="../../../../public/static/assets/js/ace.min.js"></script>

		<!-- inline scripts related to this page -->
		<script type="text/javascript">
			jQuery(function($) {
			
				$('#simple-colorpicker-1').ace_colorpicker({pull_right:true}).on('change', function(){
					var color_class = $(this).find('option:selected').data('class');
					var new_class = 'widget-box';
					if(color_class != 'default')  new_class += ' widget-color-'+color_class;
					$(this).closest('.widget-box').attr('class', new_class);
				});
			
			
				// scrollables
				$('.scrollable').each(function () {
					var $this = $(this);
					$(this).ace_scroll({
						size: $this.attr('data-size') || 100,
						//styleClass: 'scroll-left scroll-margin scroll-thin scroll-dark scroll-light no-track scroll-visible'
					});
				});
				$('.scrollable-horizontal').each(function () {
					var $this = $(this);
					$(this).ace_scroll(
					  {
						horizontal: true,
						styleClass: 'scroll-top',//show the scrollbars on top(default is bottom)
						size: $this.attr('data-size') || 500,
						mouseWheelLock: true
					  }
					).css({'padding-top': 12});
				});
				
				$(window).on('resize.scroll_reset', function() {
					$('.scrollable-horizontal').ace_scroll('reset');
				});
			
				
				$('#id-checkbox-vertical').prop('checked', false).on('click', function() {
					$('#widget-toolbox-1').toggleClass('toolbox-vertical')
					.find('.btn-group').toggleClass('btn-group-vertical')
					.filter(':first').toggleClass('hidden')
					.parent().toggleClass('btn-toolbar')
				});
			
				
			    $('.widget-container-col').sortable({
			        connectWith: '.widget-container-col',
					items:'> .widget-box',
					handle: ace.vars['touch'] ? '.widget-title' : false,
					cancel: '.fullscreen',
					opacity:0.8,
					revert:true,
					forceHelperSize:true,
					placeholder: 'widget-placeholder',
					forcePlaceholderSize:true,
					tolerance:'pointer',
					start: function(event, ui) {
						//when an element is moved, it's parent becomes empty with almost zero height.
						//we set a min-height for it to be large enough so that later we can easily drop elements back onto it
						ui.item.parent().css({'min-height':ui.item.height()})
						//ui.sender.css({'min-height':ui.item.height() , 'background-color' : '#F5F5F5'})
					},
					update: function(event, ui) {
						ui.item.parent({'min-height':''})
						//p.style.removeProperty('background-color');
			
						
						//save widget positions
						var widget_order = {}
						$('.widget-container-col').each(function() {
							var container_id = $(this).attr('id');
							widget_order[container_id] = []
							
							
							$(this).find('> .widget-box').each(function() {
								var widget_id = $(this).attr('id');
								widget_order[container_id].push(widget_id);
								//now we know each container contains which widgets
							});
						});
						
						ace.data.set('demo', 'widget-order', widget_order, null, true);
					}
			    });
				
				
				///////////////////////
			
				//when a widget is shown/hidden/closed, we save its state for later retrieval
				$(document).on('shown.ace.widget hidden.ace.widget closed.ace.widget', '.widget-box', function(event) {
					var widgets = ace.data.get('demo', 'widget-state', true);
					if(widgets == null) widgets = {}
			
					var id = $(this).attr('id');
					widgets[id] = event.type;
					ace.data.set('demo', 'widget-state', widgets, null, true);
				});
			
			
				(function() {
					//restore widget order
					var container_list = ace.data.get('demo', 'widget-order', true);
					if(container_list) {
						for(var container_id in container_list) if(container_list.hasOwnProperty(container_id)) {
			
							var widgets_inside_container = container_list[container_id];
							if(widgets_inside_container.length == 0) continue;
							
							for(var i = 0; i < widgets_inside_container.length; i++) {
								var widget = widgets_inside_container[i];
								$('#'+widget).appendTo('#'+container_id);
							}
			
						}
					}
					
					
					//restore widget state
					var widgets = ace.data.get('demo', 'widget-state', true);
					if(widgets != null) {
						for(var id in widgets) if(widgets.hasOwnProperty(id)) {
							var state = widgets[id];
							var widget = $('#'+id);
							if
							(
								(state == 'shown' && widget.hasClass('collapsed'))
								||
								(state == 'hidden' && !widget.hasClass('collapsed'))
							) 
							{
								widget.widget_box('toggleFast');
							}
							else if(state == 'closed') {
								widget.widget_box('closeFast');
							}
						}
					}
					
					
					$('#main-widget-container').removeClass('invisible');
					
					
					//reset saved positions and states
					$('#reset-widgets').on('click', function() {
						ace.data.remove('demo', 'widget-state');
						ace.data.remove('demo', 'widget-order');
						document.location.reload();
					});
				
				})();
			
			});
		</script>